let canvas = document.getElementById('myCanvas');
let div = document.getElementById('div-container');
// 获取浏览器的宽和高
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
// 获取 2d 上下文对象
let ctx = canvas.getContext('2d');

/**
 * 页面中心点
 * @type {{x: number, y: number}}
 */
let point={
    x: canvas.width / 2,
    y: canvas.height / 2
};

let deg = Math.PI / 180;


/**
 * 绘制大致轮廓
 */
function draw_outline() {
    let count = 0;
    ctx.strokeStyle = 'rgb(0, 175, 255)';
    ctx.lineWidth = 40;
    let timer = setInterval(function () {
        count++;

        // 上方横线
        ctx.beginPath();
        ctx.moveTo(point.x - 170,point.y - 150);
        ctx.lineTo(point.x - 170 + 3.4 * count, point.y - 150);
        ctx.closePath();
        ctx.stroke();

        // 右上方拐角
        ctx.beginPath();
        ctx.arc(point.x + 170, point.y - 120, 30, -Math.PI / 2,  - Math.PI / 2 + 0.9 * count * deg, false);
        ctx.stroke();

        // 右边竖线
        ctx.beginPath();
        ctx.moveTo(point.x + 200, point.y - 120);
        ctx.lineTo(point.x + 200, point.y - 120 + 2.4 * count);
        ctx.closePath();
        ctx.stroke();

        // 右下方拐角
        ctx.beginPath();
        ctx.arc(point.x + 170, point.y + 120, 30, 0,  0.9 * count* deg, false);
        ctx.stroke();

        // 下方横线
        ctx.beginPath();
        ctx.moveTo(point.x + 170, point.y + 150);
        ctx.lineTo(point.x + 170 - 3.4 * count, point.y + 150);
        ctx.closePath();
        ctx.stroke();

        // 左下方拐角
        ctx.beginPath();
        ctx.arc(point.x - 170, point.y + 120, 30, Math.PI / 2,  Math.PI / 2 + 0.9 * count* deg, false);
        ctx.stroke();

        // 左方竖线
        ctx.beginPath();
        ctx.moveTo(point.x - 200, point.y + 120);
        ctx.lineTo(point.x - 200, point.y + 120 - 2.4 * count);
        ctx.closePath();
        ctx.stroke();

        // 左上方拐角
        ctx.beginPath();
        ctx.arc(point.x - 170, point.y - 120, 30, Math.PI,  Math.PI + 0.9 * count* deg, false);
        ctx.stroke();

        if (count === 100){
            div.className = 'container';
            clearInterval(timer);
            draw_organ();
        }
    }, 10);
}
draw_outline();


/**
 * 绘制眼、脚、嘴、耳
 */
function draw_organ() {
    let count_8 = 0;
    let timer8 = setInterval(function () {
        count_8++;
        ctx.lineCap = 'butt';
        ctx.lineWidth = 35;
        // 眼睛
        ctx.beginPath();
        ctx.moveTo(point.x - 50, point.y - 60);
        ctx.lineTo(point.x - 50 - count_8, point.y - 60 + 0.3 * count_8);
        ctx.moveTo(point.x + 50, point.y - 60);
        ctx.lineTo(point.x + 50 + count_8, point.y - 60 + 0.3 * count_8);
        ctx.stroke();
        // 脚
        ctx.beginPath();
        ctx.arc(point.x - 120, point.y + 150, 20, 0, 1.8 * count_8 *deg, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(point.x + 120, point.y + 150, 20, 0, 1.8 * count_8 *deg, false);
        ctx.stroke();

        // 嘴
        ctx.lineWidth = 15;
        ctx.beginPath();
        ctx.moveTo(point.x + 4, point.y + 30);
        ctx.bezierCurveTo(point.x - 20, point.y + 60, point.x - 40, point.y + 70, point.x - 60, point.y + 40);
        ctx.moveTo(point.x - 4, point.y + 30);
        ctx.bezierCurveTo(point.x + 20, point.y + 60, point.x + 40, point.y + 70, point.x + 60, point.y + 40);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(point.x, point.y + 40, 70 - 0.7 * count_8, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#FFFFFF';
        ctx.fill();

        // 耳朵
        ctx.lineWidth = 20;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(point.x - 30, point.y - 150);
        ctx.lineTo(point.x - 30 - count_8 / 2, point.y - 150 - count_8 / 2);
        ctx.moveTo(point.x + 30, point.y - 150);
        ctx.lineTo(point.x + 30 +  count_8 / 2, point.y - 150 -  count_8 / 2);
        ctx.moveTo(point.x + 30, point.y - 150);
        ctx.lineTo(point.x + 30 +  count_8 / 2, point.y - 150 -  count_8 / 2);
        ctx.closePath();
        ctx.stroke();
        if (count_8 === 100){
            clearInterval(timer8);
            setTimeout(function () {
                ctx.clearRect(point.x - 170, point.y - 120, 340, 240);
                draw_text();
            },5000);
        }
    },10)
}


/**
 * 绘制文本
 */
function draw_text() {
    ctx.font = "56px 楷体";
    ctx.lineWidth = 1;
    let count = 0;
    let timer_text = setInterval(function () {
        count += 0.01;
        ctx.strokeStyle = 'rgba(0, 170, 255,' + count + ')';
        ctx.strokeText("再见2020", point.x - 160, point.y - 50);
        ctx.strokeText("干杯2021", point.x - 60, point.y + 50);
        ctx.strokeText("🍻", point.x - 160, point.y + 100);
        if(count === 1){
            clearInterval(timer_text);
        }
    }, 100);
}

